<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Favorite Food Selector</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        input[type="checkbox"] {
            margin-right: 5px;
        }
        button {
            margin: 5px;
        }
        img {
            max-width: 200px;
            max-height: 300px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>你最喜欢哪个食物</h3>
        <input type="checkbox" v-model="all" @change="fullClick">全选<br>
        <span v-for="(item, index) in list" :key="index">
            <input type="checkbox" v-model="item.check" @change="checkClick">{{item.name}}
        </span><br>
        新增其他：<input type="text" v-model="newFood"><br>
        <input type="file" @change="uploadImage"><button @click="addFood">上传</button><br>
        <button @click="selectAll">全选</button>
        <button @click="deselectAll">全不选</button>
        <button @click="invertSelect">反选</button><br>
        <span v-for="item in list" :key="item.name">
            <img :src="item.src" v-show="item.check" style="width: 200px;height: 300px;">
        </span>
    </div>
</body>
<script>
    const appConn = Vue.createApp({
        data() {
            return {
                list: [
                    {name: '饺子', check: false, src: './饺子.png'},
                    {name: '面条', check: false, src: './面条.PNG'},
                    {name: '蛋糕', check: false, src: './蛋糕.PNG'}
                ],
                all: false,
                newFood: ''
            };
        },
        methods: {
            fullClick() {
                this.list.forEach(v => v.check = this.all);
            },
            checkClick() {
                const allChecked = this.list.length && this.list.every(item => item.check);
                this.all = allChecked;
            },
            selectAll() {
                this.all = true;
                this.fullClick();
            },
            deselectAll() {
                this.all = false;
                this.fullClick();
            },
            invertSelect() {
                this.list.forEach(item => item.check = !item.check);
            },
            addFood() {
                if (this.newFood && !this.list.some(item => item.name === this.newFood)) {
                    this.list.push({ name: this.newFood, check: false, src: '' });
                    this.newFood = ''; // Clear the input after adding
                }
            },
            uploadImage(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = e => {
                        const index = this.list.findIndex(item => item.name === this.newFood);
                        if (index !== -1) {
                            this.list[index].src = e.target.result;
                        }
                    };
                    reader.readAsDataURL(file);
                }
            }
        }
    }).mount('#app');
</script>
</html>